<template> 
    <div class="other-group-view">
      <!-- 引入公共头部导航栏 -->
      <div class="other-group-container">
        <h3 class="section-title">团体咨询</h3>
        <!-- 内容区域 -->
        <div class="content-area">
          <div class="home-header">
            <h2 class="cards-title">我想知道</h2>
            <p class="cards-subtitle">选择您感兴趣的服务</p>
          </div>
          
          <div class="cards-grid">
            <!-- 有子卡片的情况 -->
            <div 
              v-for="(card, index) in cards" 
              :key="index" 
              class="card-item" 
              :class="{'has-children': card.children}"
              @click="card.children ? null : navigateToRoute(card)"
            >
              <div class="card-icon">
                <span v-if="index === 0">🔒</span>
                <span v-else-if="index === 1">🏆</span>
                <span v-else-if="index === 2">📝</span>
                <span v-else>📋</span>
              </div>
              <div class="card-content">
                <div class="card-title">{{ card.title }}</div>
                <div class="card-description">{{ card.description }}</div>
              </div>
              
              <!-- 子卡片展示区域 -->
              <div v-if="card.children" class="children-cards">
                <div 
                  v-for="(childCard, childIndex) in card.children" 
                  :key="childIndex"
                  class="child-card-item"
                  @click.stop="navigateToRoute(childCard)"
                >
                  <div class="child-card-content">
                    <div class="child-card-title">{{ childCard.title }}</div>
                    <div class="child-card-description">{{ childCard.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup> 
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 卡片数据
const cards = ref([
  {
    id: 1,
    title: '公关维护',
    description: '企业公关维护与危机管理服务',
    children: [
      {
        id: 1,
        title: '内部公关',
        description: '企业内部公关维护服务',
        route: '/health',
        params: { categoryId: 11 }
      },
      {
        id: 2,
        title: '竞标公关',
        description: '企业竞标公关服务',
        route: '/health',
        params: { categoryId: 12 }
      },
      {
        id: 3,
        title: '危机公关',
        description: '企业危机公关服务',
        route: '/health',
        params: { categoryId: 13 }
      },
      {
        id: 4,
        title: '公关审核',
        description: '企业公关方案审核与评估',
        route: '/health',
        params: { categoryId: 18 }
      }
    ]
  },
  {
    id: 2,
    title: '战略部署',
    description: '企业战略规划与部署服务',
    children: [
      {
        id: 1,
        title: '行业发展',
        description: '企业行业发展服务',
        route: '/health',
        params: { categoryId: 14 }
      },
      {
        id: 2,
        title: '战略部署',
        description: '企业战略部署服务',
        route: '/health',
        params: { categoryId: 15 }
      },
      {
        id: 3,
        title: '评估项目',
        description: '企业评估项目服务',
        route: '/health',
        params: { categoryId: 16 }
      },
      {
        id: 4,
        title: '人员架构',
        description: '企业人员架构服务',
        route: '/health',
        params: { categoryId: 17 }
      },
    ]
  },
  
]);

// 导航到指定路由
const navigateToRoute = (card) => {
  if (!card.route) return;
  
  router.push({
    path: card.route,
    query: card.params
  });
};
</script>

<style lang="less" scoped>
.other-group-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  
}

.other-group-container {
  flex: 1;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-weight: 500;
}

.content-area {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.home-header {
  text-align: center;
  margin-bottom: 30px;
}

.cards-title {
  font-size: 1.8rem;
  color: #3f51b5;
  margin-bottom: 8px;
}

.cards-subtitle {
  font-size: 1rem;
  color: #666;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(63, 81, 181, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.card-description {
  font-size: 0.9rem;
  color: #666;
}

/* 有子卡片的样式 */
.has-children {
  flex-direction: column;
  align-items: flex-start;
}

.children-cards {
  width: 100%;
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.child-card-item {
  display: flex;
  padding: 10px;
  margin-bottom: 8px;
  background-color: #f9f9f9;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.child-card-item:last-child {
  margin-bottom: 0;
}

.child-card-item:hover {
  background-color: #f0f0f0;
}

.child-card-content {
  flex: 1;
}

.child-card-title {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.child-card-description {
  font-size: 0.85rem;
  color: #666;
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}
</style>